<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>SpreadShout</title>
        <meta name="description" content="">

        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/media.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/shadowbox.css">
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div class="full-img">
            <!-- FILTRO DE IMAGEN DE FONDO -->
            <div id="filter-img"></div>
            <!-- FIN FILTRO DE IMAGEN DE FONDO -->

            <!-- NAV -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex5-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="img/logo-txt-wh.png" alt="Spread Shout" /></a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="navbar-collapse navbar-ex5-collapse collapse" style="height: 1px;">
                        <ul class="nav navbar-nav">
                            <li><a class="scrollTo" href="#how-it-works">How it works</a></li>
                            <li><a class="scrollTo" href="#features">Features</a></li>
                            <li class="log-in"><a data-toggle="modal" href="#loginModal">Log-in</a></li>
                            <!--<li id="navStarted"><a data-toggle="modal" href="#startModal">Get Started</a></li>-->
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
            </nav>

            <!-- FIN NAV -->

            <div class="container">
                <div class="center-content">
                    <div class="row">
                        <div><h1><strong>Extend</strong> your message <br /> through <strong>social networks</strong>.</h1></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-5">
                            <a class="play-button" rel="shadowbox;width=720;height=480;player=swf" title="" href="http://www.youtube.com/v/lSnWhsmlGec&amp;hl=en&amp;fs=1&amp;rel=0&amp;autoplay=1"></a>
                            <!--<a href="http://player.vimeo.com/video/71910452?autoplay=1" rel="shadowbox;height=555;width=970" class="play-button"></a>-->
                        </div>
                    </div>

                    <!-- BOTON GET STARTED -->
                    <div class="row">
                        <div class="col-sm-4 col-md-4 col-lg-2 col-sm-offset-4 col-md-offset-4 col-lg-offset-5">
                            <button class="btn btn-lg notify-btn" data-toggle="modal" href="#startModal">Get started!</button>
                            <p class="log-in-center">or <a data-toggle="modal" href="#loginModal">Log-in</a></p>
                        </div>
                    </div>
                    <!-- FIN BOTON GET STARTED -->
                </div>
            </div>
        </div>
        <script type="text/javascript">
        $('.full-img').css({
            'background': 'url("img/home-bg.jpg") no-repeat',
            'background-size': 'cover',
            'background-position': '50% 50%'
        });
        </script>

        <!-- HOW IT WORKS -->
        <section id="how-it-works" role="complementary" class="separador">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-lg-offset-4">
                        <h2>How it works</h2>                
                    </div>
                </div>
            </div>
        </section>
        <section role="contentinfo">

            <div class="info-sections">
                <div class="container">
                    <!-- Recruit -->
                    <div class="row marginBottom">
                        <div class="col-xs-12 col-sm-5 col-md-6 col-lg-6">
                            <h3 class="main-titles">Recruit your <strong>Spreaders</strong></h3>
                            <p>Ask your supporters to let you post on their behalf through Facebook or Twitter and they will become Spreaders of your message on a daily, weekly or monthly basis.</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-lg-5 col-md-5 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                            <img src="img/svg/01Spreaders.svg" alt="Spreaders" />
                        </div>
                    </div>
                    <!-- Create -->
                    <div class="row marginBottom">
                        <div class="col-xs-12 col-sm-5 col-md-6 col-lg-6 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 pull-right">
                            <h3 class="main-titles">Create a <strong>shout</strong></h3>
                            <p>Create the message you want to spread, and Shout. Your message will show up in your Spreaders timelines in no time.</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-lg-5 col-md-5 pull-left">
                            <img src="img/svg/02shout.svg" alt="Shout" />
                        </div>
                    </div>
                    <!-- Manage -->
                    <div class="row marginBottom">
                        <div class="col-xs-12 col-sm-5 col-md-6 col-lg-6">
                            <h3 class="main-titles">Manage your <strong>reach</strong></h3>
                            <p>As the message will reach the audience as coming from someone they know, the message has more power and effectiveness. You can target your shouts by location, gender, type of social network and age.</p>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-lg-5 col-md-5 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                            <img src="img/svg/03reach.svg" alt="Reach" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FIN HOW IT WORKS -->

        <!-- WHY YOU LOVE IT -->
        <section id="features" role="complementary" class="separador">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-lg-offset-4">
                        <h2>Why you'll love it</h2>                
                    </div>
                </div>
            </div>
        </section>
        <section role="contentinfo" class="info-sections circle-content sectionColor">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-md-4 col-lg-4 space">
                        <div class="circle-img"><img src="img/svg/04social.svg" alt="Social" /></div>
                        <h4>Socially connected</h4>
                        <p>Shout through facebook and twitter. LinkedIn, G+ and Pinterest coming soon!</p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4 space">
                        <div class="circle-img"><img src="img/svg/05stats.svg" alt="Stats" /></div>
                        <h4>Great insights</h4>
                        <p>Track your shouts and the evolution you are having.</p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-4 space">
                        <div class="circle-img"><img src="img/svg/06edit.svg" alt="Edit" /></div>
                        <h4>Customize it</h4>
                        <p>Customize your SpreadShout user landing to suit your cause.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div id="carousel-example-generic" class="carousel slide">
                            <div class="carousel-inner">
                                <div class="item">
                                    <h3>"La gente se sum&oacute; enseguida y en menos de una semana ten&iacute;amos un alcance de 140,000 seguidores."</h3>
                                    <p>Juan Perez, Green Peace.</p>
                                </div>                                
                                <div class="item active">
                                    <h3>"La gente se sum&oacute; enseguida y en menos de una semana ten&iacute;amos un alcance de 140,000 seguidores."</h3>
                                    <p>Juan Perez, Green Peace.</p>
                                </div>
                            </div>
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FIN WHY YOU LOVE IT -->
        <hr />
        <!-- ALREADY USING SS -->
        <section role="contentinfo" class="info-sections circle-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1">
                        <div class="row">
                            <div class="col-lg-12">
                                <h4 class="marginBottomXl"><span>Already using</span> Spread<span>Shout:</span></h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 space">
                                <div class="row">
                                    <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12">
                                        <div class="circle-brand"><img src="img/logos/pdlr.png" alt="" /></div>
                                    </div>
                                    <div class="col-xs-8 col-sm-12 col-md-12 col-lg-12">
                                        <p class="brand-txt-align"><strong>Partido de la red</strong> <br /><span>Political Party</span></p>                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 space">
                                <div class="row">
                                    <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12">
                                        <div class="circle-brand"><img src="img/logos/gp.png" alt="" /></div>
                                    </div>
                                    <div class="col-xs-8 col-sm-12 col-md-12 col-lg-12">
                                        <p class="brand-txt-align"><strong>Green Peace</strong> <br /><span>NGO</span></p>                                      
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 space">
                                <div class="row">
                                    <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12">
                                        <div class="circle-brand"><img src="img/logos/tn.png" alt="" /></div>
                                    </div>
                                    <div class="col-xs-8 col-sm-12 col-md-12 col-lg-12">
                                        <p class="brand-txt-align"><strong>Todo Noticias</strong> <br /><span>News</span></p>                                    
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 space">
                                <div class="row">
                                    <div class="col-xs-4 col-sm-12 col-md-12 col-lg-12">
                                        <div class="circle-brand"><img src="img/logos/tn.png" alt="" /></div>
                                    </div>
                                    <div class="col-xs-8 col-sm-12 col-md-12 col-lg-12">
                                        <p class="brand-txt-align"><strong>Todo Noticias</strong> <br /><span>News</span></p>                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FIN ALREADY USING SS -->

        <!-- GET STARTED -->
        <section role="banner">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h3 class="main-titles">Try it for <strong>free</strong>, we know you'll love it</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-md-4 col-lg-2 col-sm-offset-4 col-md-offset-4 col-lg-offset-5">
                        <button type="submit" class="btn btn-lg notify-btn"  data-toggle="modal" href="#startModal">Get started!</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- FIN GET STARTED -->

        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <p>Got any questions? Email us at <a href="mailTo:hi@spreadshout.com">hi@spreadshout.com</a></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="social">
                            <div id="fb-root"></div><!--
                            <script>(function(d, s, id) {
                                    var js, fjs = d.getElementsByTagName(s)[0];
                                    if (d.getElementById(id))
                                        return;
                                    js = d.createElement(s);
                                    js.id = id;
                                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=181048452086629";
                                    fjs.parentNode.insertBefore(js, fjs);
                                }(document, 'script', 'facebook-jssdk'));</script>
                            <div class="fb-like" data-href="http://www.spreadshout.com/" data-width="150" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
                            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.spreadshout.com/" data-lang="es" data-hashtags="spreadshout">Twittear</a>
                            <script>
                                !function(d, s, id) {
                                    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
                                    if (!d.getElementById(id)) {
                                        js = d.createElement(s);
                                        js.id = id;
                                        js.src = p + '://platform.twitter.com/widgets.js';
                                        fjs.parentNode.insertBefore(js, fjs);
                                    }
                                }(document, 'script', 'twitter-wjs');
                            </script>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <p class="all-rights">&#174; 2013 SpreadShout. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Modal LogIn -->
        <div class="modal fade home" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Log in</h3>
                    <p>Connect with a social network:</p>
                    <div class="logSocial">
                        <button class="fb">Facebook</button><button class="tw">Twitter</button>
                    </div>
                    <hr />
                    <p>Or log in with your email address:</p>
                    <form action="">
                        <fieldset>
                            <label for="email">Email</label><br />
                            <input type="text"  name="mail" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label><br />
                            <input type="password"  name="password"/>
                            <a class="small-text-login">Forgot your password?</a>
                        </fieldset>
                        <button>Go!</button>
                    </form>
                    <hr />
                    <p>Don't have an account yet? <a data-toggle="modal" href="#startModal">Get Started!</a></p>
                </div>
            </div>
        </div>

        <!-- Modal GetStarted -->
        <div class="modal fade home" id="startModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Get started!</h3>
                    <p>The first step is to create your <b>Spread</b>Shout user.<br />Connect with a social network:</p>
                    <div class="logSocial">
                        <button class="fb">Facebook</button><button class="tw">Twitter</button>
                    </div>
                    <hr />
                    <p>Or sign up using your <a data-toggle="modal" href="#emailModal">email address</a></p>
                </div>
            </div>
        </div>

        <!-- Modal GetStarted 2 -->
        <div class="modal fade home" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <!-- Contenido modal -->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="clearfix"></div>
                    <h3>Get started!</h3>
                    <p>The first step is to create your <b>Spread</b>Shout user.</p>
                    <form action="">
                        <fieldset>
                        <label for="name">Full Name</label><br />
                        <input type="text"  name="name" />
                        </fieldset>
                        <fieldset>
                        <label for="email">Email</label><br />
                        <input type="text"  name="mail" />
                        </fieldset>
                        <fieldset>
                        <label for="password">Password</label><br />
                        <input type="password"  name="password"/>
                        </fieldset>
                        <fieldset>
                        <label for="password">Confirm Password</label><br />
                        <input type="password"  name="password"/>
                        </fieldset>
                        <fieldset>
                        <input type="checkbox" name="agreed" value="1"><p class="terms">I have read and agreed to the user <a href="">Terms & Agreements</a></p>
                        </fieldset>
                        <button>Go!</button>
                    </form>
                    <hr />
                </div>
            </div>
        </div>

        <script src="js/vendor/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/shadowbox.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>